<template>
  <div>
    <ul>
        <li>
            <img src="https://pic.cdfgsanya.com/assets/upload/visual/1250b774c5c8870103b2339dc0d82003.png" alt="">
            <span>清仓特卖</span>
        </li>
        <li>
            <div v-for="(v,index) in arr" :key="index">
                <img :src="v.img" alt="">
                <p>{{ v.newprice }}</p>
                <del>{{ v.oldprice }}</del>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import service from '@/utils/service';
export default {
    data(){
        return {
            arr:[]
        }
    },
    mounted(){
        service({
            url:"http://localhost:3000/ClearanceSale",
            method:'get'
        }).then((res)=>{
           res.data.forEach(element => {
                this.arr.push(element)
           });
        })
    }
}
</script>

<style scoped>
ul {
    height: 150px;
}
li:nth-child(1) img {
    width: 18px;
    height: 18px;
}
li:nth-child(2) {
    display: flex;
    overflow: auto;
    text-align: center;
}
li:nth-child(2)::-webkit-scrollbar {
    display: none;
}
li:nth-child(2) img {
    width: 90px;
    height: 90px;
}
li:nth-child(2) p {
    font-size: 14px
}
li:nth-child(2) del {
    font-size: 12px;
    color: #999;
    text-decoration:line-through;
}
</style>